@import '../../app.less';
.container{
    width:100%;
    min-height:100%;
    padding-bottom:300rpx;
    .card-area{
        width:100%;
        height:594rpx;
        border-radius:12rpx;
        .card-pic{
            width:100%;
            height:594rpx;
            border-radius:12rpx;
        }
    }
    .write-blessing{
        width:722rpx;
        margin:30rpx auto 20rpx;
        border-radius:6rpx;

        .blessing-title{
            color:@main-color;
            font-size:32rpx;
            line-height:54rpx;
            padding-left:6rpx;
            margin-bottom:10rpx;
        }
        textarea{
            width:100%;
            padding:20rpx;
            height:214rpx;
            color:#000000;
            font-size:24rpx;
            line-height:34rpx;
            background:#ffffff;
            border:solid 2rpx #efefef;
        }
    }
    .record-area{
        width:722rpx;
        height:128rpx;
        border-radius:8rpx;
        background:#ffffff;
        
        margin:0 auto;
        .record-title{
            color:@main-color;
            font-size:32rpx;
            line-height:54rpx;
            padding-left:6rpx;
            margin-bottom:10rpx;
        }
        .record-box{
            border:solid 2rpx #efefef;
            margin:20rpx 0;
            .record-icon{
                width:96rpx;
                height:96rpx;
                border-radius:50%;
                margin:20rpx 0 10rpx;
            }
            .record-desc{
                color:@minor-color;
                font-size:24rpx;
                line-height:34rpx;
                margin-bottom:12rpx;
            }
            .play-btn{
                width:96rpx;
                height:96rpx;
                border-radius:50%;
                margin:0 20rpx;
            }
            .record-progress{
                .record-text{
                    color:@main-color;
                    font-size:28rpx;
                    line-height:40rpx;
                }
                .control-process{
                    color:@minor-color;
                    font-size:24rpx;
                    line-height:34rpx;
                }
            }
            .del-box{
                width:100rpx;
                text-align:center;
                margin:0 30rpx;
                .icon-size{
                    color:#404040;
                    width:60rpx;
                    height:60rpx;
                    line-height:60rpx;
                    border-radius:50%;
                    background:#ebebeb;
                }
                .del-text{
                    color:@minor-color;
                    font-size:24rpx;
                    line-height:34rpx;
                }
            }
            .slider{
                padding:0;
                margin:0;
            }
            .control-process{
                color:@minor-color;
                font-size:24rpx;
                line-height:34rpx;
            }
        }
        .record-desc{
            .line1{
                color:@main-color;
                font-size:28rpx;
                line-height:40rpx;
                margin-bottom:6rpx;
            }
            .line2{
                color:#939393;
                font-size:24rpx;
                line-height:34rpx;
            }
        }
    }
    .next-btn-box{
        position:fixed;
        left:14rpx;
        bottom:0;
        height:140rpx;
        background:#ffffff;
        z-index:99;
        .next-btn{
            font-size:28rpx;
            width:722rpx;
            height:88rpx;
            line-height:88rpx;
            background:linear-gradient(to right, #666666, #2b2b2b);
            color:#ffcd81;
            border-radius:8rpx;
            text-align:center;
        }
    }
    
    .post-modal{
        width: 750rpx;
        height: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        .post-type-box{
            width:100%;
            position:fixed;
            left:0;
            bottom:0;
            background:rgba(35,35,35,0.4);
            .post-type-item{
                height:100rpx;
                padding-left:220rpx;
                background:#ffffff;
                
                &+.post-type-item{
                    border-top:solid 2rpx #ececec;
                }
                .icon-size{
                    font-size:48rpx;
                    margin-right:30rpx;
                }
                .post-type-desc{
                    text-align:left;
                    .line1{
                        color:#535252;
                        font-size:28rpx;
                        line-height:40rpx;
                        margin-bottom:6rpx;
                    }
                    .line2{
                        color:#939393;
                        font-size:24rpx;
                        line-height:34rpx;
                    }
                }
            }
            .cancel-btn{
                color:#535252;
                font-size:28rpx;
                height:100rpx;
                line-height:100rpx;
                text-align:center;
                background:#ffffff;
                margin-top:20rpx;
            }

        }
    }
}
